<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>网上订餐</title>
    <link th:href="@{/project/css/public.css}" rel="stylesheet"/>
    <link th:href="@{/project/css/proList.css}" rel="stylesheet"/>
</head>
<body>
<!------------------------------head------------------------------>
<div class="head" th:include="include::normal_headDiv"></div>

<!-------------------current---------------------->
<div class="current">
    <div class="wrapper clearfix">
        <a th:href="@{/index/searchGoods}" th:if="${goodsTypeName!=null}">食堂分类</a>
        <a th:if="${goodsTypeName!=null}">/</a>
        <a th:if="${goodsTypeName!=null}" th:text="${goodsTypeName}"></a>
        <div class="fr choice">
            <select class="default" onchange="setOrderBy(this)">
                <option value="">默认排序</option>
                <option value="1">销量从高到低</option>
                <option value="2">销量从低到高</option>
                <option value="3">价格从高到低</option>
                <option value="4">价格从低到高</option>
            </select>
        </div>
    </div>
</div>
<!----------------proList------------------------->
<ul class="proList wrapper clearfix">

</ul>
<!----------------mask------------------->
<div id="footer" th:include="include::normal_footerDiv"></div>
<div th:include="include::footer_normal"></div>
<script th:src="@{/project/cart.js}"></script>
<script th:inline="javascript">
    var goodsType = [[${goodsType}]];

    var _$goodsItemModel = $('<li>' +
        '<a href="">' +
        '<dl>' +
        '<dt><img></dt>' +
        '<dd></dd>' +
        '<dd><span></span><span></span></dd>' +
        '</dl>' +
        '</a>' +
        '</li>');
    function query(orderByColumn,isAsc){
        orderByColumn = $.common.isEmpty(orderByColumn)?undefined:orderByColumn;
        isAsc = $.common.isEmpty(isAsc)?undefined:isAsc;
        $(".proList").paginationInit({
            url: ctx + "index/searchGoodsList",
            pageSize: 20,
            pageList: [20, 30, 40, 50],
            ajaxParams: {
                "keyWords": $("#keyWords").val(),
                "goodsType": goodsType,
                "orderByColumn":orderByColumn,
                "isAsc":isAsc
            },
            loadDataItem: function (obj) {
                _$goodsItemModel.find("a").attr("href", goodsClickHref(obj.goodsId));
                _$goodsItemModel.find("img").attr("src", obj.imgUrl);
                _$goodsItemModel.find("dd:eq(0)").html(obj.goodsName);
                _$goodsItemModel.find("dd:eq(1) span:eq(0)").html("￥" + obj.goodsPrice);
                _$goodsItemModel.find("dd:eq(1) span:eq(1)").html("销量" + obj.sumSales);
                return _$goodsItemModel[0].outerHTML;
            }
        });
    }
    function setOrderBy(obj){
        var json = {
            "1":{column:"sumSales",isAsc:"desc"},
            "2":{column:"sumSales",isAsc:"asc"},
            "3":{column:"goodsPrice",isAsc:"desc"},
            "4":{column:"goodsPrice",isAsc:"asc"}
        };
        var orderObj = json[$(obj).val()];
        query(orderObj.column,orderObj.isAsc);
    }
    $(function () {
        query();
    });
</script>
</body>
</html>
